<template>
  <div id="article-page">
    <div id="to-new-article-page" @click="router.push({name: 'newarticle'})"><EditOutlined></EditOutlined></div>
    <ArticleCard
      :key="i"
      v-for="(article, i) in articleList"
      :title="article.title"
      :content="article.contentStarts200"
      :tags="article.tags"
      :author-name="article.postStaff.name"
      :avater="article.postStaff.avater"
      :like-count="article.likeCount"
      :reply-count="article.replyCount"
      :create-time="article.createTime"
      @enter-article="() => router.push({name: 'lookarticle', params: {article: JSON.stringify(article)}})"
      @delete-post="() => handleDeleteArticle(article.id)"
    ></ArticleCard>
    <HoverToLoadingComponent :is-fetching-list="isFetchingList" :no-more="noMore" @on-hover="fetch"></HoverToLoadingComponent>
  </div>
</template>

<script setup lang="ts">
import ArticleCard from '@/components/public/ArticleCard.vue';
import { EditOutlined } from '@ant-design/icons-vue';
import useArticleApi from '@/composable/article-api';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';


const { fetch, articleList, isFetchingList, noMore, handleDeleteArticle } = useArticleApi(() => location.reload());
const router = useRouter();

onMounted(fetch);

</script>

<style scoped>
#article-page {
  overflow: hidden;
  max-width: 800px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 10px 0px 56px -40px rgba(0,0,0,0.75);
  -webkit-box-shadow: 10px 0px 56px -40px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 0px 56px -40px rgba(0,0,0,0.75);
}
@media screen and (max-width: 800px) {
  #article-page {
    margin: 20px 20px;
  }
}
#to-new-article-page {
  color: white;
  text-align: center;
  line-height: 40px;
  width: 40px;
  height: 40px;
  background-color: #1890ff;
  border-radius: 100%;
  position: fixed;
  bottom: 60px;
  right: 60px;
}
</style>